<template>
  <view class="flex-col">
    <view class="container">
      <scroll-view scroll-x class="scroll-view-container">
        <uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor" @clickItem="onClickItem" />
      </scroll-view>
    </view>
    <view class="content">
      <view v-if="current === 0">
        <apply-message v-model="ruleForm" />
      </view>
      <view v-if="current === 1">
        <dispose-message v-model="ruleForm" :vehicleDisposalId="vehicleDisposalId" />
      </view>
      <view v-if="current === 2">
        <salvage-message v-model="ruleForm" />
      </view>
      <view v-if="current === 3">
        <cancels-message v-model="ruleForm" />
      </view>
      <view v-if="current === 4">
        <ownership-message v-model="ruleForm" />
      </view>
      <view v-if="current === 5">
        <controls-message v-model="ruleForm" />
      </view>
    </view>
  </view>
</template>

<script>
import * as apis from '@/api/vehicleWarning'
import applyMessage from '../routineHandle/components/applyMessage'
import disposeMessage from '../routineHandle/components/disposeMessage.vue'
import salvageMessage from '../routineHandle/components/salvageMessage.vue'
import cancelsMessage from '../routineHandle/components/cancelsMessage.vue'
import ownershipMessage from '../routineHandle/components/ownershipMessage.vue'
import controlsMessage from '../routineHandle/components/controlsMessage.vue'

export default {
  name: 'details',
  components: {
    applyMessage,
    disposeMessage,
    salvageMessage,
    cancelsMessage,
    ownershipMessage,
    controlsMessage,
  },
  computed: {},
  watch: {},
  data() {
    return {
      items: ['申请信息', '处置记录', '残值记录', '撤销处置', '过户/手续', '操作记录'],
      activeColor: '#007aff',
      current: 0,
      colorIndex: 0,
      ruleForm: {},
      vehicleDisposalId: '',
    }
  },
  onLoad(op) {
    this.flowId = op?.flowId
    this.vehicleDisposalId = op?.vehicleDisposalId
    this.handleDetails(op?.vehicleDisposalId)
  },
  created() {},
  mounted() {},
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex
      }
    },

    async handleDetails(vehicleDisposalId) {
      try {
        let obj = {
          vehicleDisposalNo: vehicleDisposalId,
        }
        const res = await apis.getInfoDetail(obj)
        this.ruleForm = res.data || {}
      } catch (e) {
        console.error(e)
      }
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff !important;
  margin: 20rpx 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .scroll-view-container {
    white-space: nowrap;
    background-color: #fff !important;
  }
}
</style>
